<template>
    <div>
      <div>
        <span>新增</span>
      </div>
      <div class="container">
        <div class="user-index">
          <div class="user-index-header">
            <div class="user-index-header-title">
            </div>
          </div>
          <div class="user-index-body">
            <div class="user-index-body-form">
              <el-form ref="ruleFormRef" style="max-width: 100%; display: flex; flex-wrap: wrap; gap: 20px;"
                :model="ruleForm"  label-width="auto" class="demo-ruleForm"  status-icon>
  
                <el-form-item label="客户" prop="name" style="margin-right: 60px; margin-left: 50px;">
                  <el-select v-model="ruleForm.name" placeholder="选择客户" style="width: 200px; ">
                    <el-option label="客户1" value="shanghai" />
                    <el-option label="客户2" value="beijing" />
                  </el-select>
                </el-form-item>
  
                <el-form-item label="单据日期" prop="date" style="margin-right: 60px;">
                  <el-date-picker type="date" placeholder="选择日期" clearable class="input" v-model="ruleForm.date"
                    style="width: 200px;" />
                </el-form-item>
  
                <el-form-item label="单据编号" prop="number" style="margin-right: 60px;">
                  <el-input v-model="ruleForm.number" placeholder="请输入单据编号" style="width: 200px; " />
                </el-form-item>
  
                <el-form-item label="销售人员" prop="location">
                  <el-select v-model="ruleForm.location" placeholder="选择销售人员" style="width: 200px;">
                    <el-option label="小李" value="shanghai" />
                    <el-option label="小胡" value="beijing" />
                  </el-select>
                </el-form-item>
                <div class="user-index-body-form-btn">
                  <div class="user-index-body-form-btn-item">
                    <div class="ant-row-flex" style="display: flex; align-items: center;">
  
                      <div class="ant-col" style="margin-right: 10px;">
                        <el-button type="primary" class="ant-btn ant-btn-primary">
                          <el-icon class="el-icon-left">
                            <Plus />
                          </el-icon>
                          <span>插入行</span>
                        </el-button>
                      </div>
  
                      <div class="ant-col" style="margin-right: 10px;">
                        <el-button plain>扫码录入</el-button>
                      </div>
  
                      <div class="ant-col" style="margin-right: 10px;">
                        <el-button plain>
                          <el-icon style="margin-right: 5px;">
                            <Clock />
                          </el-icon>
                          历史单据
                        </el-button>
                      </div>
  
                      <div class="ant-col">
                        <el-button plain>
                          <el-icon style="margin-right: 5px;">
                            <Grid />
                          </el-icon>
                          导入明细
                        </el-button>
                      </div>
  
                    </div>
  
                    <div class="input-group" style="margin-top: 10px;border: 1px solid #E6E6E6;">
                      <div class="input-group-prepend">
                        <div data-v-5c0b4bc0="" id="_jet-ll1chf-inputTable" class="input-table"
                          style="min-width: 1500px;">
                          <div class="table">
                            <div class="table-header">
                              <div class="table-row">
                                <div class="table-cell checkbox">
                                  <label class="ant-checkbox-wrapper">
                                    <input type="checkbox" class="ant-checkbox-input" aria-label="Select all">
                                    <span class="ant-checkbox-inner"></span>
                                  </label>
                                </div>
                                <div class="table-cell">条码</div>
                                <div class="table-cell">名称</div>
                                <div class="table-cell">规格</div>
                                <div class="table-cell" style="display: none;">型号
                                </div>
                                <div class="table-cell" style="display: none;">颜色
                                </div>
                                <div class="table-cell" style="display: none;">扩展信息
                                </div>
                                <div class="table-cell">库存</div>
                                <div class="table-cell">单位</div>
                                <div class="table-cell" style="display: none;">多属性
                                </div>
                                <div class="table-cell">数量</div>
                                <div class="table-cell">单价</div>
                                <div class="table-cell">金额</div>
                                <div class="table-cell">税率</div>
                                <div class="table-cell">税额</div>
                                <div class="table-cell">价税合计</div>
                                <div class="table-cell">备注</div>
                              </div>
                            </div>
                            <div class="table-body">
                              <div class="table-row">
                                <div class="table-cell checkbox">
                                  <label class="ant-checkbox-wrapper">
                                    <input type="checkbox" class="ant-checkbox-input">
                                    <span class="ant-checkbox-inner"></span>
                                  </label>
                                </div>
                                <div class="table-cell">123456789</div>
                                <div class="table-cell">商品名称</div>
                                <div class="table-cell">规格信息</div>
                                <div class="table-cell" style="display: none;">型号信息
                                </div>
                                <div class="table-cell" style="display: none;">颜色信息
                                </div>
                                <div class="table-cell" style="display: none;">扩展信息
                                </div>
                                <div class="table-cell">10</div>
                                <div class="table-cell">件</div>
                                <div class="table-cell" style="display: none;">多属性信息
                                </div>
                                <div class="table-cell">5</div>
                                <div class="table-cell">100.00</div>
                                <div class="table-cell">500.00</div>
                                <div class="table-cell">10%</div>
                                <div class="table-cell">50.00</div>
                                <div class="table-cell">550.00</div>
                                <div class="table-cell">无</div>
                              </div>
                              <!-- 可以添加更多行 -->
                              <div class="table-row">
                                <div class="table-cell checkbox">
                                  <label class="ant-checkbox-wrapper">
                                    <input type="checkbox" class="ant-checkbox-input">
                                    <span class="ant-checkbox-inner"></span>
                                  </label>
                                </div>
                                <div class="table-cell">987654321</div>
                                <div class="table-cell">商品名称2</div>
                                <div class="table-cell">规格信息2</div>
                                <div class="table-cell" style="display: none;">型号信息2
                                </div>
                                <div class="table-cell" style="display: none;">颜色信息2
                                </div>
                                <div class="table-cell" style="display: none;">扩展信息2
                                </div>
                                <div class="table-cell">20</div>
                                <div class="table-cell">件</div>
                                <div class="table-cell" style="display: none;">
                                  多属性信息2</div>
                                <div class="table-cell">10</div>
                                <div class="table-cell">150.00</div>
                                <div class="table-cell">1500.00</div>
                                <div class="table-cell">15%</div>
                                <div class="table-cell">225.00</div>
                                <div class="table-cell">1725.00</div>
                                <div class="table-cell">备注信息</div>
                              </div>
                            </div>
                          </div>
  
                          <div data-v-9168d56a="" data-v-5c0b4bc0=""><!----></div>
                        </div>
                        <div class="body-group-text">
  
                          <el-input type="textarea" placeholder="请输入备注信息" style="width: 100%; height: 100px;" />
  
  
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="index-body tb">
                  <el-form-item label="优惠率：">
                    <el-input style="width: 240px">
                      <template #suffix>
                        <span>%</span>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="收款优惠：">
                    <el-input style="width: 240px">
  
                    </el-input>
                  </el-form-item>
                  <el-form-item label="优惠后金额：">
                    <el-input style="width: 240px">
  
                    </el-input>
                  </el-form-item>
                  <el-form-item label="其他费用：">
                    <el-input style="width: 240px">
  
                    </el-input>
                  </el-form-item>
                </div>
                <div class="index-body zb">
  
                  <el-form-item label="结算账户：">
  
                    <el-select placeholder="选择客户" style="width: 200px; " placement="top">
                      <el-option label="客户1" value="shanghai" />
                      <el-option label="客户2" value="beijing" />
                    </el-select>
  
  
                  </el-form-item>
                  <el-form-item label="收取定金：">
                    <el-input style="width: 240px">
  
                    </el-input>
                  </el-form-item>
  
                </div>
                <div class="ant-coloery" style="margin-right: 10px;">
                  <el-button plain><el-icon style="margin-right: 10px;">
                      <MessageBox />
                    </el-icon>上传附件</el-button>
                </div>
                <div class="index-body wb">
                  <div class="ant-coloery" style="margin-right: 10px;">
                    <el-button>取消</el-button>
                  </div>
                  <div class="ant-coloery" style="margin-right: 10px;">
                    <el-button>保存并审核</el-button>
                  </div>
                  <div class="ant-coloery" style="margin-right: 10px;">
                    <el-button type="primary">保存</el-button>
                  </div>
  
                </div>
              </el-form>
            </div>
  
          </div>
        </div>
      </div>
  
    </div>
  </template>
  
  
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import type { FormInstance, TagProps } from 'element-plus';
  
  // Dialog 可见性
  const centerDialogVisible = ref(false);
  
  // 定义表单数据结构
  interface RuleForm {
    name: string;
    date: string;
    location: string;
    number: string;
  }
  
  // 表单引用
  const ruleFormRef = ref<FormInstance>();
  // 表单数据
  const ruleForm = reactive<RuleForm>({
    name: '',
    date: '',
    number: '',
    location: ''
  });
  
  
  
  // 提交表单
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('提交成功！');
      } else {
        console.log('提交错误！', fields);
      }
    });
  }
  
  // 重置表单
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };
  
  // 表单行数据
  const formInline = reactive({
    user: '',
    region: '',
    date: '',
    additional: ''
  });
  
  // 表单展开状态
  const expanded = ref(false);
  
  // 切换展开状态
  const toggle = () => {
    expanded.value = !expanded.value;
  };
  
  // 提交处理
  const onSubmit = () => {
    console.log('submit!');
  };
  
  // 重置处理
  const onReset = () => {
    formInline.user = '';
    formInline.region = '';
    formInline.date = '';
    formInline.additional = '';
  };
  
  // 表格数据
  const tableData = [
    { date: '2016-05-04', name: 'Aleyna Kutzner' },
    { date: '2016-05-03', name: 'Helen Jacobi' },
    { date: '2016-05-02', name: 'Brandon Deckert' },
    { date: '2016-05-01', name: 'Margie Smith' },
  ];
  
  // 标签项类型
  type Item = { type: TagProps['type']; label: string };
  
  // 标签项数据
  const items = ref<Array<Item>>([
    { type: 'danger', label: '未审核' },
    // { type: 'success', label: '已审核' },
    // { type: '', label: '完成销售' },
  ]);
  
  
  const num = ref(1)
  const handleChange = (value: number) => {
    console.log(value)
  }
  
  import { defineEmits } from 'vue';
  let emits = defineEmits(['close'])
  let formData = ref({})
  
  </script>
  